<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>2.事件传参</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h2>欢迎来到{{school}}</h2>
      <button @click="test1">按钮1（不传参数）</button>
      <button @click="test2(6)">按钮2（传递一个参数）</button>
      <button @click="test3(6,7,8)">按钮3（传递多个参数）</button>
      <button @click="test4(6,7,8,$event)">按钮4（传参+事件对象）</button>
      <button @click="test5(test1)">按钮5（传参的参数也可以是data中的数据）</button>

      <!-- 以下写法有点傻 -->
      <!-- <button @click="test1()">按钮</button> -->
      <!-- <button @click="test1($event)">按钮</button> -->
    </div>

    <script type="text/javascript">
      const vm = new Vue({
        el:'#demo',
        data:{
          school:'尚硅谷',
          tel:'010-56253825'
        },
        methods:{
          // 纵使我们没有传递任何参数，test1也会收到一个event
          test1(event){
            console.log('test1调用了',event)
          },
          // test2会收到一个number
          test2(number){
            console.log('test2调用了',number)
          },
          // test3会收到三个数字
          test3(n1,n2,n3){
            console.log('test3调用了',n1,n2,n3)
          },
          // test4会收到三个数字以及事件对象
          test4(a1,a2,a3,e){
            console.log('test4调用了',a1,a2,a3,e)
          },
          // test4会收到传递的数据（数据其实是来自于data中的）
          test5(value){
            console.log('test5调用了',value)
          }
        }
      })
    </script>
  </body>
</html>